<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Document</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
    <link rel="stylesheet/less" href="./assets/css/three.less" />
</head>
<style>
    .a{
        width: 100%;
        display: flex;
        margin-bottom: 20px;
    }
</style>

<body>
    <!-- 头部 -->
    <header class="header" id="header">
        <nav class="navbar navbar-fixed-top">
            <div class="container">
                <!-- LOGO -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="logo wow fadeInLeft" href="javascript:void(0)">
                        <img src="./assets/images/sky-logo-header.png" alt="">
                    </a>
                </div>
                <!-- 导航 -->
                <div class=" navbar-collapse collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="index.html" class="wow fadeInRight animated" data-wow-delay="100ms">首页</a></li>
                        <li><a href="tow.html" class="wow fadeInRight animated" data-wow-delay="200ms">按摩</a></li>
                        <li><a href="three.html" class="wow fadeInRight animated" data-wow-delay="300ms">别墅Party</a>
                        </li>
                        <li><a href="index.html" class="wow fadeInRight animated" data-wow-delay="400ms">首页</a></li>
                        <li><a href="tow.html" class="wow fadeInRight animated"
                                data-wow-delay="500ms">按摩</a></li>
                        <li><a href="three.html" class="wow fadeInRight animated" data-wow-delay="600ms">别墅Party</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>


    <!-- OUR-EVENTS -->
    <div class="events">
        <div class="container">
            <h2 class="events-title">我们的活动</h2>
            <div class="line"></div>
            <div class="a">
                <div><img src="./assets/images/Our-Events-1.jpg" alt=""></div>
                <div><img src="./assets/images/Our-Events-2.jpg" alt=""></div>
                <div><img src="./assets/images/Our-Events-3.jpg" alt=""></div>
            </div>
        </div>
        <div class="owl-nav">
            <div class="owl-prev"></div>
            <div class="owl-next"></div>
        </div>
        <div class="owl-dots">
            <div class="owl-dot active"></div>
            <div class="owl-dot"></div>
        </div>
    </div>

    <!-- ABOUT -->
    <div class="contact wthree all_pad">
        <div class="container">
            <h3 class="title">
                关于
                <span></span>
            </h3>
            <div class="ab-grids">
                <div class="col-md-6 ab-grid-left">
                    <div class="col-sm-6 ab-grid-img">
                        <img src="./assets/images/m2.jpg" class="img-responsive" alt="">
                    </div>
                    <div class="col-sm-6 ab-grid-img">
                        <img src="./assets/images/m3.jpg" class="img-responsive" alt="">
                    </div>
                    <div class="col-sm-6 ab-grid-img img-top">
                        <img src="./assets/images/m4.jpg" class="img-responsive" alt="">
                    </div>
                    <div class="col-sm-6 ab-grid-img img-top">
                        <img src="./assets/images/m5.jpg" class="img-responsive" alt="">
                    </div>
                </div>
                <div class="col-md-6 ab-grid-right">
                    <h2>
                        开心乐园，建立美满家园！ 
                    </h2>
                    <p>
                        浪漫与庄严的气质,挑高的门厅和气派的大门,圆形的拱窗和转角的石砌,尽显雍容华贵。
                        黑色大理石铺成的地板,明亮如镜子的瓷砖,华丽的水晶垂钻吊灯,玻璃的纯黑香木桌,
                        进 口的名牌靠椅,精美的细雕书橱,整个房间,几乎无法形容了。
                        抬头望,这里的星星离你特别近;白天有空就看云卷云舒;下雨啦,那就看雨点怎么落吧;
                         没关系,我在客房里。
                    </p>
                    <p></p>
                    <ul>
                        <li>
                            <span class="glyphicon glyphicon-ok"></span>
                            <a href="#">消费者： 布吉岛丁</a>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-ok"></span>
                            <a href="#">消费者： 布吉岛丁</a>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-ok"></span>
                            <a href="#">消费者： 布吉岛丁</a>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-ok"></span>
                            <a href="#">消费者： 布吉岛丁</a>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-ok"></span>
                            <a href="#">消费者： 布吉岛丁</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- ABOUT -->
    <div class="contact wthree all_pad">
        <div class="container">
            <h3 class="title">
                别墅信息
                <span></span>
            </h3>
            <div class="gallery-grids">
                <div class="col-sm-6 gallery-grids-left">
                    <div class="gallery-grid">
                        <a href="./assets/images/g1 (1).jpg" class="b-link-stripe b-animate-go  swipebox">
                            <div class="port-7 effect-3">
                                <div class="image-box">
                                    <img src="./assets/images/g1 (1).jpg" alt="">
                                </div>
                                <div class="gal-desc">
                                    <h4>真实站点</h4>
                                    <p>环境优美，干净整洁
                                        尊敬的精英们，欢迎光临。</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 gallery-grids-left">
                    <div class="gallery-grid">
                        <a href="./assets/images/g2（1）.jpg" class="b-link-stripe b-animate-go  swipebox">
                            <div class="port-7 effect-3">
                                <div class="image-box">
                                    <img src="./assets/images/g2（1）.jpg" alt="">
                                </div>
                                <div class="gal-desc">
                                    <h4>真实站点</h4>
                                    <p>环境优美，干净整洁
                                        尊敬的精英们，欢迎光临。</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 gallery-grids-left pro-top">
                    <div class="gallery-grid">
                        <a href="./assets/images/g3 (1).jpg" class="b-link-stripe b-animate-go  swipebox">
                            <div class="port-7 effect-3">
                                <div class="image-box">
                                    <img src="./assets/images/g3 (1).jpg" alt="">
                                </div>
                                <div class="gal-desc">
                                    <h4>真实站点</h4>
                                    <p>环境优美，干净整洁
                                        尊敬的精英们，欢迎光临。</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 gallery-grids-left pro-top">
                    <div class="gallery-grid">
                        <a href="./assets/images/g4（1）.jpg" class="b-link-stripe b-animate-go  swipebox">
                            <div class="port-7 effect-3">
                                <div class="image-box">
                                    <img src="./assets/images/g4（1）.jpg" alt="">
                                </div>
                                <div class="gal-desc">
                                    <h4>真实站点</h4>
                                    <p>环境优美，干净整洁
                                        尊敬的精英们，欢迎光临。</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 gallery-grids-left pro-top">
                    <div class="gallery-grid">
                        <a href="./assets/images/g5（1）.jpg" class="b-link-stripe b-animate-go  swipebox">
                            <div class="port-7 effect-3">
                                <div class="image-box">
                                    <img src="./assets/images/g5（1）.jpg" alt="">
                                </div>
                                <div class="gal-desc">
                                    <h4>真实站点</h4>
                                    <p>环境优美，干净整洁
                                        尊敬的精英们，欢迎光临。</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 gallery-grids-left pro-top">
                    <div class="gallery-grid">
                        <a href="./assets/images/g6（1）.jpg" class="b-link-stripe b-animate-go  swipebox">
                            <div class="port-7 effect-3">
                                <div class="image-box">
                                    <img src="./assets/images/g6（1）.jpg" alt="">
                                </div>
                                <div class="gal-desc">
                                    <h4>真实站点</h4>
                                    <p>环境优美，干净整洁
                                        尊敬的精英们，欢迎光临。</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <!-- TESTIMONOALS -->
    <div class="testimonials">
        <div class="testimonials-h">
            <div class="testimonials-content">
                <div class="container">
                    <div id="testimonials" class="owl-carousel owl-theme owl-loaded owl-drag">
                        <div class="owl-stage-outer">
                            <div class="owl-stage">
                                <div class="owl-item cloned">
                                    <div class="item">
                                        <div class="img-testimonials">
                                            <img src="./assets/images/about-testimonials-img.png" alt="">
                                        </div>
                                        <p class="testimonials-p">
                                            <span>“</span>
                                            ​‌ 这是卡塔利纳唯一可以住的地方！我住在便宜的酒店，
                                            他们都很好，但这只是锦上添花！在骑自行车和徒步旅行了一天之后，
                                            回来喝杯酒，同时看看你的 
                                            海景窗口，然后将其全部关闭。。。
                                            <span>”</span>
                                        </p>
                                        <h5 class="sky-h5">布吉岛丁</h5>
                                        <p class="testimonials-p1">来自中国</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="owl-nav">
                            <div class="owl-prev"></div>
                            <div class="owl-next"></div>
                        </div>
                        <div class="owl-dots">
                            <div class="owl-dot active">
                                <span></span>
                            </div>
                            <div class="owl-dot">
                                <span></span>
                            </div>
                            <div class="owl-dot">
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!-- FOOTER -->
    <footer class="footer-sky" style="margin-top: 0px;">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1">
                        <div class="icon-email">
                            <a href="#" title="Email" style="display: block;">
                                <img src="./assets/images/footer-top-icon-l.png" alt="" class="img-responsive">
                            </a>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-7 col-lg-5">
                        <div class="textbox">
                            <form class="form-inline">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="email" class="form-control" placeholder="Your email address">
                                        <button class="btn btn-secondary" type="button">
                                            <i class="ion-android-send"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-6 text-right">
                        <div class="footer-icon-l">
                            <a href="#">
                                <i class="fa fa-twitter" aria-hidden="true"></i>
                            </a>
                            <a href="#">
                                <i class="fa fa-facebook-square" aria-hidden="true"></i>
                            </a>
                            <a href="#">
                                <i class="fa fa-tripadvisor" aria-hidden="true"></i>
                            </a>
                            <a href="#">
                                <i class="fa fa-instagram" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-mid">
            <div class="container">
                <div class="row padding-footer-mid">
                    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                        <div class="footer-logo text-center list-content">
                            <a href="index.html">
                                <img src="./assets/images/sky-logo-footer.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-2
                         col-lg-2 col-lg-offset-1 col-md-offset-1  ">
                        <div class="list-content">
                            <ul>
                                <li>
                                    <a href="#">Site Map</a>
                                </li>
                                <li>
                                    <a href="#">Term & Conditions</a>
                                </li>
                                <li>
                                    <a href="#">Privacy Policy</a>
                                </li>
                                <li>
                                    <a href="#">Help</a>
                                </li>
                                <li>
                                    <a href="#">Affiliate</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-2
                         col-lg-2 col-lg-offset-1 col-md-offset-1  ">
                        <div class="list-content">
                            <ul>
                                <li>
                                    <a href="#">Our Location</a>
                                </li>
                                <li>
                                    <a href="#">Career</a>
                                </li>
                                <li>
                                    <a href="#">About Us</a>
                                </li>
                                <li>
                                    <a href="#">Contact Us</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-2
                         col-lg-2 col-lg-offset-1 col-md-offset-1  ">
                        <div class="list-content">
                            <ul>
                                <li>
                                    <a href="#">FAQS</a>
                                </li>
                                <li>
                                    <a href="#">News</a>
                                </li>
                                <li>
                                    <a href="#">Photo & Video</a>
                                </li>
                                <li>
                                    <a href="#">Restaurant</a>
                                </li>
                                <li>
                                    <a href="#">Gift Card</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="footer-bottom"></div>
            </div>
        </div>
    </footer>


</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    //获取id为background的元素
    var background = document.getElementById("background")

    //将视频速度调慢
    background.playbackRate = 10

    //实例化wow.js
    new WOW().init()


    // 滚动监听
    // a href == id 
    //锚点跳转滑动效果  
    $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#back a[href]').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                    scrollTop: targetOffset
                }, 1000);
                return false;
            }
        }
    });

    //给页面绑定一个滚动条事件
    $(document).scroll(function () {
        //获取滚动条滚动长度大小
        var distance = $(this).scrollTop()

        //当滚动条滚动的长度大于10
        if (distance > 10) {
            //显示返回顶部
            $("#gotop").css({ zIndex: 99998, opacity: 1 });
            $("#header").css({ backgroundColor: '#111111', paddingBottom: 0 });
        } else {
            //隐藏返回顶部
            $("#gotop").css({ zIndex: -99998, opacity: 0 });
            $("#header").css({ backgroundColor: 'transparent', paddingBottom: '1em' });
        }
    })
</script>